<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-07-12 21:52:43
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-12-18 23:29:42
 * @FilePath: \dance\pages\me\components\teacherCollect.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="teacher-collect">
    <uv-line color="#545454" margin="17rpx 8.5rpx"></uv-line>
    <view class="tabs">
      <view v-for="(item, index) in tabs" :key="item.name" @click="onChange(item, index)">
        <view>{{ item.name }}</view>
      </view>
      <view class="tabs-line" :style="{ '--left': ['0%', '33.3333%', '66.6666%'][tabActive] }"></view>
    </view>
    <view class="content">
      <view v-for="(item, index) in tabs" :key="item.name" class="content-item" :class="{ 'content-active': tabActive === index }">
        <view v-if="index === tabActive && tabActive === 0" class="lesson">
          <view v-for="row in item.data" :key="row.id" class="lesson-card" @click="onGoLesson(row)">
            <view class="lesson-card-image">
              <uv-image
                :src="row.video?.cover || (isFileType(row.video?.address) === 'image' ? row.video?.address : defaultImagesList[row?.random])"
                height="100%"
                width="100%"
              ></uv-image>
            </view>
            <view class="lesson-card-dance" v-if="row.lesson?.danceType">
              {{ row.lesson?.danceType }}
            </view>
          </view>
        </view>
        <view v-if="index === tabActive && tabActive === 1" class="videos">
          <view v-for="row in item.data" :key="row.id" class="videos-card">
            <zVideo :data="row"></zVideo>
          </view>
        </view>
        <view v-if="index === tabActive && tabActive === 2" class="teacher">
          <view v-for="(row, index) in item.data" class="teacher-card">
            <view class="teacher-card-info" @click="onGoTeacher(row.id)">
              <uv-avatar
                :src="row.profilePhoto || defaultImagesList[$uv.random(0, defaultImagesList.length - 1)]"
                size="122rpx"
                mode="aspectFill"
              ></uv-avatar>
              <view class="teacher-card-info-name">
                <view class="name">{{ row.username }} </view>
                <view class="num">
                  <text class="num-text">课程数</text>
                  <text> {{ row.lessons }}</text>
                </view>
              </view>
            </view>
            <view class="teacher-card-button" @click.stop="onCloseCollect(row, index)"> 已收藏 </view>
          </view>
          <view class="teacher-card-empty">
            <uv-empty v-if="!item.data.length"></uv-empty>
          </view>
        </view>
      </view>
    </view>
  </view>
  <uv-modal ref="modalRef" title="操作确认" content="确定取消？" showCancelButton asyncClose @confirm="onCollectConfirm"></uv-modal>
  <uv-toast ref="toastRef"></uv-toast>
</template>

<script setup>
  import { ref, reactive, defineProps, defineExpose, watch, nextTick } from 'vue';
  import { defaultImagesList } from '@/common/js/global.js';
  import { isFileType, toastFn, onGoTeacher, suiji } from '@/common/js/fn';
  import zVideo from './z-video.vue';
  // 接口问题，导致这里加了key videos vidoes 有区别请注意
  let tabs = ref([
    { name: '课程', data: [], ajax: 'lessons', key: 'lessons', options: { pageSize: 10, currentPage: 1 } },
    { name: '视频', data: [], ajax: 'videos', key: 'vidoes', options: { pageSize: 10, currentPage: 1 } },
    { name: '老师', data: [], ajax: 'teachers', key: 'teachers', options: { pageSize: 10, currentPage: 1 } }
  ]);
  const toastRef = ref();
  let props = defineProps({
    current: {
      type: Number,
      default: 1
    }
  });
  // 监听父元素传参
  watch(
    () => props.current,
    val => {
      if (val !== 2) return;
      nextTick(() => {
        httpData();
      });
    },
    { immediate: true }
  );
  // 切换tabs
  let tabActive = ref(0);
  const onChange = (item, index) => {
    if (item.id === props.current) return;
    tabActive.value = index;
    tabs.value[tabActive.value].options.currentPage = 1;
    httpData();
  };
  // 公共请求数据
  const httpData = async (reset = true) => {
    let val = tabs.value[tabActive.value];
    let data = await uni.$uv.http.post(`/app/collect/${val.ajax}`, val.options);
    let list = data[val.key].map(async r => {
      let random = await suiji(0, defaultImagesList.length - 1);
      return { ...r, random };
    });
    if (reset) {
      val.data.splice(0, val.data.length, ...list);
    } else {
      val.data.push(...list);
    }
  };
  // 主要是用于滚动到底部事件触发
  const sonChange = () => {
    let val = tabs.value[tabActive.value];
    val.options.currentPage++;
    httpData(false);
  };
  defineExpose({ sonChange });
  // 前往课程详情
  const onGoLesson = val => {
    uni.$uv.route({
      url: '/pages/main/course',
      params: {
        id: val.id
      }
    });
  };

  // #region 老师相关事件
  let modalRef = ref();
  let closeCollectVal = ref([]);
  // 点击取消，弹窗
  const onCloseCollect = (val, index) => {
    modalRef.value.open();
    closeCollectVal.value = [val, index];
  };
  // 确认取消
  const onCollectConfirm = async () => {
    try {
      await uni.$uv.http.post(`app/collect/cancel`, {
        classify: 'Teacher', //收藏类型
        objid: closeCollectVal.value[0].id, //收藏对象的数据ID
        optype: 'collect' //操作类型
      });
      // 删除已经取消关注的老师
      tabs.value[tabActive.value].data.splice(closeCollectVal.value[1], 1);
      modalRef.value.close();
      toastFn(toastRef.value, '取消收藏成功', 'success');
    } catch (error) {
      // 失败了也要关闭
      modalRef.value.close();
    }
  };
  // #endregion
</script>

<style lang="scss" scoped>
  .teacher-collect {
    display: flex;
    flex-direction: column;
  }
  .tabs {
    display: flex;
    justify-content: space-between;
    padding: 0 87rpx;
    font-size: 35rpx;
    position: relative;
    &-line {
      z-index: 9999;
      height: 10rpx;
      width: 113rpx;
      position: absolute;
      background-color: #fff;
      bottom: -10px;
      left: calc(var(--left) + 68rpx);
      transition: all 0.3s;
      background-color: #ff7a66;
      border-radius: 35rpx;
    }
  }
  .content {
    flex: 1;
    padding-top: 35rpx;
    box-sizing: border-box;
    position: relative;
    &-item {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 100%;
      transition: all 0.3s;
      opacity: 0;
    }
    &-active {
      left: 0;
      opacity: 1;
    }
  }
</style>
<style lang="scss" scoped>
  .lesson,
  .videos,
  .teacher {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 26rpx;
    box-sizing: border-box;
    background-color: $dance-bg-color;
  }
  .lesson {
    &-card {
      font-size: 24rpx;
      position: relative;
      height: 485rpx;
      width: 49%;
      border-radius: 21rpx;
      margin-bottom: 14rpx;
      overflow: hidden;
      &-image {
        height: 100%;
      }
      &:nth-of-type(even) {
        margin-left: 2%;
      }
      &-status {
        position: absolute;
        top: 174rpx;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        width: 249rpx;
        height: 68rpx;
        line-height: 68rpx;
        border-radius: 34rpx;
        text-align: center;
      }
      &-dance {
        position: absolute;
        padding: 0 21rpx;
        box-sizing: border-box;
        bottom: 5rpx;
        left: 9rpx;
        background-color: #1d1f24;
        height: 38rpx;
        line-height: 38rpx;
        border-radius: 24rpx;
        text-align: center;
      }
    }
  }
  .videos-card {
    font-size: 24rpx;
    position: relative;
    width: 49%;
    border-radius: 21rpx;
    margin-bottom: 14rpx;
    overflow: hidden;
    &:nth-of-type(even) {
      margin-left: 2%;
    }
  }
  .teacher-card {
    margin-bottom: 82rpx;
    height: 122rpx;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    &-empty {
      display: flex;
      justify-content: center;
      width: 100%;
    }
    &-info {
      display: flex;
      &-name {
        margin-left: 35rpx;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        .name {
          font-size: 35rpx;
        }
        .num {
          color: #959595;
          font-size: 24rpx;
          &-text {
            margin-right: 17rpx;
          }
        }
      }
    }
    &-button {
      border-radius: 49rpx;
      height: 51rpx;
      line-height: 51rpx;
      width: 124rpx;
      text-align: center;
      background-color: #b1b1b1;
      font-size: 24rpx;
    }
  }
</style>
